<div class="userTemplate">
    <div class="row">
        <div class="col-md-12">
            <div class="sortOrder">
                <span class="fontSorted">Sorted By:</span>
                <span class="filters" [ngClass]="{'setFilterColor':date}" (click)="userListFilter('createdAt', 'descending')">Created At</span>
                <div [hidden]="!date" [ngClass]="{'upDown':date}">
                    <span><i class="ion-arrow-up-a" [ngClass]="{'upDownicon':upIcon}"
                             (click)="upIcon=true;downIcon=false;userListFilter('createdAt', 'ascending')"></i></span>
                    <span><i class="ion-arrow-down-a" [ngClass]="{'upDownicon':downIcon}"
                             (click)="upIcon=false;downIcon=true;userListFilter('createdAt', 'descending')"></i></span>
                </div>
                <span class="filters" [ngClass]="{'setFilterColor':userName}" (click)="userListFilter('firstName', 'ascending' )">Name</span>

                <div [hidden]="!userName" [ngClass]="{'upDown':userName}">
                    <span><i class="ion-arrow-up-a" [ngClass]="{'upDownicon':!upIcon}"
                             (click)="upIcon=false;downIcon=true;userListFilter('firstName', 'ascending' )"></i></span>
                    <span><i class="ion-arrow-down-a" [ngClass]="{'upDownicon':!downIcon}"
                             (click)="upIcon=true;downIcon=false;userListFilter('firstName', 'descending')"></i></span>
                </div>
                <div class="col-sm-2 categoriesbox adduserbuttons">
                    <a href="admin/addUser">
                        <button type="button" class="btn btn-default btn-auth postbutton addButton">Add New User
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-12 userFilter">

                <div class="col-sm-2 categoriesbox  title">
                    <button class="btn dropdown-toggle zoombtn leftAlign togglebutton" type="button" data-toggle="dropdown">{{category}}
                    </button>
                    <ul class="dropdown-menu leftAlign downbutton">

                        <li class="underln" (click)="category='Name';showTextbox();">Name</li>
                        <li class="underln" (click)="category='Email';showTextbox();">Email</li>
                        <li class="underln" (click)="category='Status';showTextbox();">Status</li>
                        <li class="underln" (click)="category='City';showTextbox();">City</li>
                        <li class="underln" (click)="category='State';showTextbox();">State</li>
                        <li class="underln" (click)="category='Country';showTextbox();">Country</li>


                    </ul>
                </div>
                <div class="col-sm-4 categoriesbox">
                    <div class="tagdiv" *ngIf="category!='Tags'">
                        <input type="text" class="form-control" [(ngModel)]="searchType" (keypress)="onKeyPressUser($event)" placeholder="Search By {{category}}" />
                    </div>
                </div>
                <div class="col-sm-2 dateheights">
                    <div class="date-input">
                        <label class="fromToDate">From Date</label>
                    </div>
                    <div class="col-sm-12 col-md-12 formatdatepicker">

                        <my-date-picker [options]="myDatePickerOptions" [selDate]="fromDate" (dateChanged)="onFromDateChanged($event)"></my-date-picker>
                    </div>

                </div>
                <div class="col-sm-2 dateheights todatespicker">
                    <div class="date-input seconddatepicker">
                        <label class="fromToDate">To Date</label>
                    </div>
                    <div class="col-sm-12 col-md-12 formatdatepicker">

                        <my-date-picker [options]="myDatePickerOptions" [selDate]="toDate" (dateChanged)="onToDateChanged($event)"></my-date-picker>
                    </div>

                </div>


                <div class="col-sm-2 categoriesbox searchbutton">
                    <button type="button" class="btn btn-default btn-auth postbutton" (click)="getUserLists()">Search
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12 col-md-12 spaceOfCard"></div>
    <div class="col-lg-12 col-md-12">
        <ba-card baCardClass="with-scroll table-panel cardHeight">
            <div class="table-responsive">

                <table class="table table-striped">

                    <thead>
                        <tr>
                            <th class="textBold">Name</th>
                            <th class="textBold">Email</th>
                            <th class="textBold">Created At</th>
                            <th class="textBold">City</th>
                            <th class="textBold">State</th>
                            <th class="textBold">Country</th>
                            <th class="textBold">Version Name</th>
                            <th class="textBold">Edit User</th>
                            <th class="textBold">Activity</th>
                            <th class="textBold">User Logs</th>
                            <th class="textBold">Timeline</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let user of allusers">
                            <td class="userName" (click)="viewProfile(user._id); Modal.open()">{{ user.name}}</td>
                            <td>{{ user.email}}</td>
                            <td>{{ formateDate(user.createdAt) }}</td>
                            <td>{{ user.city }}</td>
                            <td>{{ user.state }}</td>
                            <td>{{ user.country }}</td>
                            <td>{{ user.version }}</td>
                            <td class="userLog" (click)="ShowEditUserInfo(user);"><i class="ion-edit editPencil"></i></td>
                            <td class="userLog" (click)="showActivityLog(user);"><i class="ion-ios-pulse"></i></td>
                            <td class="userLog" (click)="showUsersLog(user);"><i class="ion-clipboard editPencil"></i></td>
                            <td class="userLog" (click)="showUserTimeline(user);"><i class="ion-clock editPencil"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </ba-card>
    </div>

    <pagination [totalItems]="totalItem" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)" [maxSize]=5 [rotate]="false"></pagination>
    <div *ngIf="userModal" class="userModal">
        <div class="user-modal-content">
            <span class="userModalClose" (click)="userModal=false"><i class="ion-close-round"></i></span>
            <p class="submitHeading">Click on submit to update user status?</p>
            <div class="userModalButtons">
                <button class="btn btn-default btn-auth postbutton userModalOk" (click)="activateUser()">Submit</button>
                <button (click)="closeUserModal();" class="btn btn-default btn-auth postbutton userModalCancel">Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<div class="userProfileModelAdmin">
    <modal #Modal>
        <modal-header>
            <userprofile></userprofile>
        </modal-header>
    </modal>
</div>